<template>
  <span class="headerAvatar ">
    <template v-if="picType === 'avatar'">
      <el-avatar v-if="userStore.userInfo.avatar" :size="30" :src="avatar" />
      <el-avatar v-else :size="30" :src="默认头像" />
    </template>
    <template v-if="picType === 'img'">
      <img v-if="userStore.userInfo.avatar" :src="avatar" class="avatar">
      <img v-else :src="默认头像" class="avatar">
    </template>
    <template v-if="picType === 'file'">
      <el-image :src="file" class="file" :preview-src-list="previewSrcList" :preview-teleported="true" />
    </template>
  </span>
</template>

<script setup>
// import noAvatarPng from '@/assets/noBody.png'
import 默认头像 from '@/amtf/assets/xiao-h.png'
import { useUserStore } from '@/stores/use_user_store'
import { computed, ref } from 'vue'
import * as util from '@/amtf/utils';
defineOptions({
  name: 'CustomPic'
})

const props = defineProps({
  picType: {
    type: String,
    required: false,
    default: 'avatar'
  },
  picSrc: {
    type: String,
    required: false,
    default: ''
  },
  preview: {
    type: Boolean,
    default: false
  }
})

const path = ref(import.meta.env.VITE_BASE_API + '/')
// const noAvatar = ref(noAvatarPng)

const userStore = useUserStore()

const avatar = computed(() => {
  // console.log(`import.meta.env 👉`, import.meta.env)
  // console.log(`userStore.userInfo.avatar 👉`, userStore.userInfo.avatar)
  let url = props.picSrc
  if (!url) {
    url = userStore.userInfo.avatar
  }
  url = util.成url(url)
  // console.log(`url 👉`, url)
  // if (!url) {
  //   url = ''
  // }
  return url
  // if (props.picSrc === '') {
  //   if (userStore.userInfo.avatar !== '' && userStore.userInfo.avatar.slice(0, 4) === 'http') {
  //     return userStore.userInfo.avatar
  //   }
  //   return path.value + userStore.userInfo.avatar
  // } else {
  //   if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
  //     return props.picSrc
  //   }
  //   return path.value + props.picSrc
  // }
})

const file = computed(() => {
  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
    return path.value + props.picSrc
  }
  return props.picSrc
})
const previewSrcList = computed(() => props.preview ? [file.value] : [])

</script>

<style scoped>
.headerAvatar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}

.file {
  width: 80px;
  height: 80px;
  position: relative;
}
</style>
